<template>
  <section class='f-order-detail'>
    <div class="f-flex-between" style="padding:10px 13px">
      <p style="font-size: 11px;color: #666666;">订单编号：{{orderInfo.sysOrderId}}</p>
      <van-button size="mini" plain round type="primary" style="padding:3px 10px" @click="handleCopy(orderInfo.sysOrderId)">
        <p style="font-size: 9px;color: #3273F4;">复制订单号</p>
      </van-button>
    </div>

    <p class="f-title">基本信息</p>
    <van-cell title="代理商">
      <template #value>
        <p>{{orderInfo.shopName}}</p>
      </template>
    </van-cell>
    <van-cell title="订单状态">
      <template #value>
        <p :style="{'color': orderStatusColor[orderInfo.orderStatus]}">{{ orderStatus[orderInfo.orderStatus]}}</p>
      </template>
    </van-cell>
    <van-cell title="备注">
      <template #value>
        <p>{{orderInfo.orderStatusMsg}}</p>
      </template>
    </van-cell>
    <van-cell title="创建时间">
      <template #value>
        <p>{{ getDateTime(orderInfo.createTime)[6] }}</p>
      </template>
    </van-cell>
    <van-cell title="商品名称">
      <template #value>
        <p>{{orderInfo.goodsName}}</p>
      </template>
    </van-cell>

    <p class="f-title f-mt-10">证件信息</p>
    <van-cell title="证件姓名">
      <template #value>
        <p>{{orderInfo.idcardName}}</p>
      </template>
    </van-cell>
    <van-cell title="证件号码">
      <template #value>
        <p>{{orderInfo.idcardNum}}</p>
      </template>
    </van-cell>

    <p class="f-title f-mt-10">收件信息</p>
    <van-cell title="收件人">
      <template #value>
        <p>{{orderInfo.receiverName}}</p>
      </template>
    </van-cell>
    <van-cell title="联系电话">
      <template #value>
        <p>{{orderInfo.receivePhone}}</p>
      </template>
    </van-cell>
    <van-cell title="收货地址">
      <template #value>
        <p>{{orderInfo.receiveAddress}}</p>
      </template>
    </van-cell>

    <template v-if="orderInfo.payOrderId">
      <section>
        <p class="f-title f-mt-10">支付信息</p>
        <van-cell title="支付订单号">
          <template #value>
            <p>{{orderInfo.payOrderId}}</p>
          </template>
        </van-cell>
        <van-cell title="支付金额">
          <template #value>
            <p>{{orderInfo.payMoney}}</p>
          </template>
        </van-cell>
        <van-cell title="支付时间">
          <template #value>
            <p>{{orderInfo.payTime}}</p>
          </template>
        </van-cell>
        <van-cell title="支付方式">
          <template #value>
            <p>{{orderInfo.payType == 2? '微信': orderInfo.payType == 3? '支付宝': '--'}}</p>
          </template>
        </van-cell>
      </section>
    </template>

    <p class="f-title f-mt-10">生产信息</p>
    <van-cell title="生产号码">
      <template #value>
        <p>{{orderInfo.goodsPhone}}</p>
      </template>
    </van-cell>
    <van-cell title="物流单号">
      <template #value>
        <p>{{orderInfo.logisticsNum}}-{{orderInfo.logisticsName}}</p>
      </template>
    </van-cell>
    <van-cell v-if="[14,20,22,30].includes(orderInfo.activeStatus)" title="激活状态">
      <template #value>
        <p>{{activeStatusOptions[orderInfo.activeStatus]}}</p>
      </template>
    </van-cell>
    <van-cell v-show="orderInfo.activeTime" title="激活时间">
      <template #value>
        <p>{{orderInfo.activeTime ? getDateTime(orderInfo.activeTime)[6] : ''}}</p>
      </template>
    </van-cell>
    <van-cell v-show="orderInfo.chargeResult" title="首充结果">
      <template #value>
        <p>{{orderInfo.chargeResult}}</p>
      </template>
    </van-cell>
    <van-cell v-show="orderInfo.chargeTime" class="f-mb-10" title="首充时间">
      <template #value>
        <p>{{orderInfo.chargeTime ? getDateTime(orderInfo.chargeTime)[6] : ''}}</p>
      </template>
    </van-cell>

    <p v-if="orderInfo.orderStatus == 5" style="margin-top:60px"></p>
    <van-action-bar v-if="orderInfo.orderStatus == 5">
      <div style="font-size: 20px;color: #FD5356;padding:0 100px 0 13px">¥{{orderInfo.prestorePay}}</div>
      <van-action-bar-button type="danger" color="#488BFE" text="去支付" @click="toPay()" />
    </van-action-bar>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api';
import { getDateTime, successDeal } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      orderInfo: {},

      orderStatus: {
        '5': "待支付",
        '10': "订单进行中",
        '20': "受理成功",
        '30': "订单异常结束",
        '40': "订单异常待处理",
        '50': "超时关闭",
      },
      orderStatusColor: {
        '5': "#E6A23C",
        '10': "#409EFF",
        '20': "#67C23A",
        '30': "#F56C6C",
        '40': "#F56C6C",
        '50': "#F56C6C",
      },
      activeStatusOptions: {
        '14': '渠道下单失败',
        '20': '已激活',
        '22': '激活且充值',
        '30': '激活失败',
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '订单详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getOrderDetail()
    })

    const getOrderDetail = () => {
      let json = {
        sysOrderId: route.query.sysOrderId
      }

      let apiName = route.query.queryType == 1 ? 'orderQryDetail' : 'orderPromotionDetail'
      api[apiName](json).then(res => {
        state.orderInfo = res.data
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const toPay = () => {
      router.push({
        path: '/goods/pay',
        query: {
          sysOrderId: state.orderInfo.sysOrderId
        }
      })
    }

    return {
      ...toRefs(state),
      getDateTime,
      handleCopy,
      toPay
    }
  }
}
</script>
<style lang='scss' scoped>
.f-order-detail {
  .f-title {
    background: #fff;
    font-size: 14px;
    color: #000000;
    padding: 16px 14px 10px 14px;
  }
  .f-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 11px;
    background: #488bfe;
    margin-right: 4px;
  }
}
</style>